<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>命令行执行器 - 进程管理工具</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <!-- Prism.js for code highlighting -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
    
    <style>
        :root {
            --primary-color: #6366f1;
            --secondary-color: #8b5cf6;
            --success-color: #10b981;
            --warning-color: #f59e0b;
            --danger-color: #ef4444;
            --dark-color: #1f2937;
            --light-color: #f9fafb;
        }
        
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .main-container {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            margin: 2rem auto;
            max-width: 1200px;
            overflow: hidden;
        }
        
        .hero-section {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 3rem 2rem;
            text-align: center;
        }
        
        .hero-title {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }
        
        .hero-subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
            margin-bottom: 2rem;
        }
        
        .feature-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            padding: 2rem;
            margin: 1rem 0;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }
        
        .feature-icon {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            border-radius: 50%;
            color: white;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            height: 80px;
            margin-bottom: 1rem;
            width: 80px;
        }
        
        .btn-gradient {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            border: none;
            border-radius: 25px;
            color: white;
            font-weight: 600;
            padding: 12px 30px;
            transition: all 0.3s ease;
        }
        
        .btn-gradient:hover {
            background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
        
        .status-badge {
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            padding: 5px 15px;
        }
        
        .status-running {
            background-color: var(--success-color);
            color: white;
        }
        
        .status-stopped {
            background-color: var(--danger-color);
            color: white;
        }
        
        .status-error {
            background-color: var(--warning-color);
            color: white;
        }
        
        .log-container {
            background: var(--dark-color);
            border-radius: 10px;
            color: #e5e7eb;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            height: 300px;
            overflow-y: auto;
            padding: 1rem;
        }
        
        .log-entry {
            margin-bottom: 0.5rem;
            padding: 0.25rem 0;
        }
        
        .log-timestamp {
            color: #9ca3af;
        }
        
        .log-level-info {
            color: #10b981;
        }
        
        .log-level-error {
            color: #ef4444;
        }
        
        .log-level-warn {
            color: #f59e0b;
        }
        
        .command-input {
            background: var(--light-color);
            border: 2px solid #e5e7eb;
            border-radius: 10px;
            font-family: 'Courier New', monospace;
            padding: 1rem;
            transition: border-color 0.3s ease;
        }
        
        .command-input:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
        }
        
        .process-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            margin-bottom: 1rem;
            overflow: hidden;
            transition: transform 0.3s ease;
        }
        
        .process-card:hover {
            transform: translateY(-2px);
        }
        
        .process-header {
            background: linear-gradient(135deg, #f8fafc, #e2e8f0);
            padding: 1rem;
        }
        
        .process-body {
            padding: 1rem;
        }
        
        .animate-pulse {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        
        @keyframes pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: .5;
            }
        }
    </style>
</head>
<body>
    <div class="main-container">
        <!-- Hero Section -->
        <div class="hero-section">
            <h1 class="hero-title">
                <i class="fas fa-terminal me-3"></i>
                命令行执行器
            </h1>
            <p class="hero-subtitle">
                强大的进程管理工具，支持FFmpeg、DataX等命令行工具的实时监控和管理
            </p>
            <a href="/processes" class="btn btn-gradient btn-lg">
                <i class="fas fa-rocket me-2"></i>
                开始使用
            </a>
        </div>
        
        <!-- Features Section -->
        <div class="container-fluid p-4">
            <div class="row">
                <div class="col-md-4">
                    <div class="feature-card text-center">
                        <div class="feature-icon mx-auto">
                            <i class="fas fa-play"></i>
                        </div>
                        <h4>异步执行</h4>
                        <p>支持后台异步执行命令，不阻塞主程序运行，提高系统响应性能。</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="feature-card text-center">
                        <div class="feature-icon mx-auto">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <h4>实时监控</h4>
                        <p>通过WebSocket实时推送进程状态和日志，提供即时反馈和监控。</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="feature-card text-center">
                        <div class="feature-icon mx-auto">
                            <i class="fas fa-cogs"></i>
                        </div>
                        <h4>进程管理</h4>
                        <p>完整的进程生命周期管理，包括启动、停止、状态查询等功能。</p>
                    </div>
                </div>
            </div>
            
            <div class="row mt-4">
                <div class="col-md-6">
                    <div class="feature-card">
                        <h4><i class="fas fa-code me-2"></i>支持的命令类型</h4>
                        <ul class="list-unstyled">
                            <li><i class="fas fa-video me-2 text-primary"></i>FFmpeg 视频处理</li>
                            <li><i class="fas fa-database me-2 text-success"></i>DataX 数据同步</li>
                            <li><i class="fas fa-terminal me-2 text-warning"></i>通用命令行工具</li>
                            <li><i class="fas fa-cogs me-2 text-info"></i>自定义脚本</li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="feature-card">
                        <h4><i class="fas fa-rocket me-2"></i>技术特性</h4>
                        <ul class="list-unstyled">
                            <li><i class="fas fa-shield-alt me-2 text-success"></i>线程安全设计</li>
                            <li><i class="fas fa-tachometer-alt me-2 text-primary"></i>高性能架构</li>
                            <li><i class="fas fa-mobile-alt me-2 text-warning"></i>响应式界面</li>
                            <li><i class="fas fa-plug me-2 text-info"></i>可扩展SDK</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Quick Start Section -->
        <div class="container-fluid p-4 bg-light">
            <div class="row">
                <div class="col-12">
                    <h3 class="text-center mb-4">
                        <i class="fas fa-bolt me-2"></i>
                        快速开始
                    </h3>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="feature-card">
                        <h5><i class="fas fa-terminal me-2"></i>FFmpeg 示例</h5>
                        <pre><code class="language-bash">ffmpeg -i input.mp4 -c:v libx264 -c:a aac output.mp4</code></pre>
                        <p class="text-muted">视频格式转换和压缩</p>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="feature-card">
                        <h5><i class="fas fa-database me-2"></i>DataX 示例</h5>
                        <pre><code class="language-bash">python datax.py /path/to/job.json</code></pre>
                        <p class="text-muted">数据同步任务执行</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Footer -->
        <div class="bg-dark text-white text-center py-4">
            <p class="mb-0">
                <i class="fas fa-heart text-danger me-1"></i>
                命令行执行器 v1.0.0 - 强大的进程管理工具
            </p>
        </div>
    </div>
    
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Prism.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
</body>
</html> 